<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>笔记管理 - 喵咕学习平台管理后台</title>
    <link rel="stylesheet" href="css/admin-styles.css">
    <link rel="icon" type="image/x-icon" href="../favicon.ico">
</head>

<body>
    <div class="admin-layout">
        <!-- 顶部导航栏 -->
        <header class="admin-header">
            <div class="admin-header-left">
                <button class="menu-toggle" onclick="toggleSidebar()">
                    <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
                        <path
                            d="M1 2.75A.75.75 0 0 1 1.75 2h12.5a.75.75 0 0 1 0 1.5H1.75A.75.75 0 0 1 1 2.75zm0 5A.75.75 0 0 1 1.75 7h12.5a.75.75 0 0 1 0 1.5H1.75A.75.75 0 0 1 1 7.75zM1.75 12h12.5a.75.75 0 0 1 0 1.5H1.75a.75.75 0 0 1 0-1.5z" />
                    </svg>
                </button>
                <div class="admin-logo">
                    <span>喵咕管理后台</span>
                </div>
            </div>
            <div class="admin-header-right">
                <button class="theme-toggle" onclick="toggleTheme()">
                    <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
                        <path
                            d="M8 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0zm0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 13zm8-5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5zM3 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 3 8zm10.657-5.657a.5.5 0 0 1 0 .707l-1.414 1.415a.5.5 0 1 1-.707-.708l1.414-1.414a.5.5 0 0 1 .707 0zm-9.193 9.193a.5.5 0 0 1 0 .707L3.05 13.657a.5.5 0 0 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0zm9.193 2.121a.5.5 0 0 1-.707 0l-1.414-1.414a.5.5 0 0 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707zM4.464 4.465a.5.5 0 0 1-.707 0L2.343 3.05a.5.5 0 1 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .708z" />
                    </svg>
                </button>
                <div class="admin-user">
                    <span id="adminUserName">管理员</span>
                    <button class="logout-btn" onclick="logout()">
                    <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
                        <path d="M2 2.75C2 1.784 2.784 1 3.75 1h2.5a.75.75 0 0 1 0 1.5h-2.5a.25.25 0 0 0-.25.25v10.5c0 .138.112.25.25.25h2.5a.75.75 0 0 1 0 1.5h-2.5A1.75 1.75 0 0 1 2 13.25V2.75zm6.56 4.5l1.97-1.97a.75.75 0 0 1 1.06 1.06L10.31 8l1.28 1.28a.75.75 0 1 1-1.06 1.06l-1.97-1.97a.75.75 0 0 1 0-1.06z"/>
                        <path d="M10.5 8a.75.75 0 0 1 .75-.75h3a.75.75 0 0 1 0 1.5h-3A.75.75 0 0 1 10.5 8z"/>
                    </svg>
                    退出
                </button>
                </div>
            </div>
        </header>

        <!-- 侧边导航栏 -->
        <nav class="admin-sidebar" id="adminSidebar">
            <ul class="admin-sidebar-nav">
                <li><a href="dashboard.html">
                        <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
                            <path d="M8 4a4 4 0 1 1 0 8 4 4 0 0 1 0-8z" />
                        </svg>
                        仪表盘
                    </a></li>
                <li><a href="users.html">
                        <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
                            <path
                                d="M15 14s1 0 1-1-1-4-5-4-5 3-5 4 1 1 1 1h8zm-7.978-1A.261.261 0 0 1 7 12.996c.001-.264.167-1.03.76-1.72C8.312 10.629 9.282 10 11 10c1.717 0 2.687.63 3.24 1.276.593.69.758 1.457.76 1.72l-.008.002a.274.274 0 0 1-.014.002H7.022zM11 7a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm3-2a3 3 0 1 1-6 0 3 3 0 0 1 6 0zM6.936 9.28a5.88 5.88 0 0 0-1.23-.247A7.35 7.35 0 0 0 5 9c-4 0-5 3-5 4 0 .667.333 1 1 1h4.216A2.238 2.238 0 0 1 5 13c0-1.01.377-2.042 1.09-2.904.243-.294.526-.569.846-.816zM4.92 10A5.493 5.493 0 0 0 4 13H1c0-.26.164-1.03.76-1.724.545-.636 1.492-1.256 3.16-1.275zM1.5 5.5a3 3 0 1 1 6 0 3 3 0 0 1-6 0zm3-2a2 2 0 1 0 0 4 2 2 0 0 0 0-4z" />
                        </svg>
                        用户管理
                    </a></li>
                <li><a href="notes.html" class="active">
                        <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
                            <path d="M5.5 7a.5.5 0 0 0 0 1h5a.5.5 0 0 0 0-1h-5zM5 9.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5zm0 2a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 0 1h-2a.5.5 0 0 1-.5-.5z"/>
                            <path d="M9.5 0H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4.5L9.5 0zm0 1v2A1.5 1.5 0 0 0 11 4.5h2V14a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h5.5z"/>
                        </svg>
                        笔记管理
                    </a></li>
                <li><a href="settings.html">
                        <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
                            <path d="M8 4.754a3.246 3.246 0 1 0 0 6.492 3.246 3.246 0 0 0 0-6.492zM5.754 8a2.246 2.246 0 1 1 4.492 0 2.246 2.246 0 0 1-4.492 0z"/>
                            <path d="M9.796 1.343c-.527-1.79-3.065-1.79-3.592 0l-.094.319a.873.873 0 0 1-1.255.52l-.292-.16c-1.64-.892-3.433.902-2.54 2.541l.159.292a.873.873 0 0 1-.52 1.255l-.319.094c-1.79.527-1.79 3.065 0 3.592l.319.094a.873.873 0 0 1 .52 1.255l-.16.292c-.892 1.64.901 3.434 2.541 2.54l.292-.159a.873.873 0 0 1 1.255.52l.094.319c.527 1.79 3.065 1.79 3.592 0l.094-.319a.873.873 0 0 1 1.255-.52l.292.16c1.64.893 3.434-.902 2.54-2.541l-.159-.292a.873.873 0 0 1 .52-1.255l.319-.094c1.79-.527 1.79-3.065 0-3.592l-.319-.094a.873.873 0 0 1-.52-1.255l.16-.292c.893-1.64-.902-3.433-2.541-2.54l-.292.159a.873.873 0 0 1-1.255-.52l-.094-.319zm-2.633.283c.246-.835 1.428-.835 1.674 0l.094.319a1.873 1.873 0 0 0 2.693 1.115l.291-.16c.764-.415 1.6.42 1.184 1.185l-.159.292a1.873 1.873 0 0 0 1.116 2.692l.318.094c.835.246.835 1.428 0 1.674l-.319.094a1.873 1.873 0 0 0-1.115 2.693l.16.291c.415.764-.42 1.6-1.185 1.184l-.291-.159a1.873 1.873 0 0 0-2.693 1.116l-.094.318c-.246.835-1.428.835-1.674 0l-.094-.319a1.873 1.873 0 0 0-2.692-1.115l-.292.16c-.764.415-1.6-.42-1.184-1.185l.159-.291A1.873 1.873 0 0 0 1.945 8.93l-.319-.094c-.835-.246-.835-1.428 0-1.674l.319-.094A1.873 1.873 0 0 0 3.06 4.377l-.16-.292c-.415-.764.42-1.6 1.185-1.184l.292.159a1.873 1.873 0 0 0 2.692-1.115l.094-.319z"/>
                        </svg>
                        系统设置
                    </a></li>
            </ul>
        </nav>

        <!-- 主内容区域 -->
        <main class="admin-main">
            <div class="admin-container">
                <div class="page-header">
                    <h1>笔记管理</h1>
                    <div class="page-actions">
                        <button class="btn btn-primary" onclick="showBatchActions()">
                            <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
                                <path
                                    d="M2.5 3A1.5 1.5 0 0 0 1 4.5v.793c.026.009.051.02.076.032L7.674 8.51c.206.1.446.1.652 0l6.598-3.185A.755.755 0 0 1 15 5.293V4.5A1.5 1.5 0 0 0 13.5 3h-11Z" />
                                <path
                                    d="M15 6.954 8.978 9.86a2.25 2.25 0 0 1-1.956 0L1 6.954V11.5A1.5 1.5 0 0 0 2.5 13h11a1.5 1.5 0 0 0 1.5-1.5V6.954Z" />
                            </svg>
                            批量操作
                        </button>
                    </div>
                </div>

                <!-- 统计卡片 -->
                <div class="stats-grid">
                    <div class="stat-card">
                        <div class="stat-icon">
                            <svg width="24" height="24" viewBox="0 0 16 16" fill="currentColor">
                                <path d="M14 4.5V14a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h5.5L14 4.5z" />
                            </svg>
                        </div>
                        <div class="stat-content">
                            <div class="stat-number" id="totalNotes">0</div>
                            <div class="stat-label">总笔记数</div>
                        </div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-icon">
                            <svg width="24" height="24" viewBox="0 0 16 16" fill="currentColor">
                                <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z" />
                                <path
                                    d="M10.97 4.97a.235.235 0 0 0-.02.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.061L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z" />
                            </svg>
                        </div>
                        <div class="stat-content">
                            <div class="stat-number" id="pendingReview">0</div>
                            <div class="stat-label">待审核</div>
                        </div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-icon">
                            <svg width="24" height="24" viewBox="0 0 16 16" fill="currentColor">
                                <path
                                    d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.061L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z" />
                            </svg>
                        </div>
                        <div class="stat-content">
                            <div class="stat-number" id="approvedNotes">0</div>
                            <div class="stat-label">已通过</div>
                        </div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-icon">
                            <svg width="24" height="24" viewBox="0 0 16 16" fill="currentColor">
                                <path
                                    d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM5.354 4.646a.5.5 0 1 0-.708.708L7.293 8l-2.647 2.646a.5.5 0 0 0 .708.708L8 8.707l2.646 2.647a.5.5 0 0 0 .708-.708L8.707 8l2.647-2.646a.5.5 0 0 0-.708-.708L8 7.293 5.354 4.646z" />
                            </svg>
                        </div>
                        <div class="stat-content">
                            <div class="stat-number" id="rejectedNotes">0</div>
                            <div class="stat-label">已拒绝</div>
                        </div>
                    </div>
                </div>

                <!-- 搜索和筛选 -->
                <div class="admin-card">
                    <div class="search-filters">
                        <div class="search-box">
                            <input type="text" id="noteSearch" placeholder="搜索笔记标题、作者..." onkeyup="searchNotes()">
                            <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
                                <path
                                    d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z" />
                            </svg>
                        </div>
                        <div class="filter-group">
                            <select id="statusFilter" onchange="filterNotes()">
                                <option value="">所有状态</option>
                                <option value="pending">待审核</option>
                                <option value="approved">已通过</option>
                                <option value="rejected">已拒绝</option>
                                <option value="draft">草稿</option>
                            </select>
                            <select id="categoryFilter" onchange="filterNotes()">
                                <option value="">所有分类</option>
                                <option value="programming">编程</option>
                                <option value="design">设计</option>
                                <option value="business">商业</option>
                                <option value="science">科学</option>
                                <option value="other">其他</option>
                            </select>
                            <select id="sortBy" onchange="sortNotes()">
                                <option value="created_desc">创建时间↓</option>
                                <option value="created_asc">创建时间↑</option>
                                <option value="updated_desc">更新时间↓</option>
                                <option value="updated_asc">更新时间↑</option>
                                <option value="views_desc">浏览量↓</option>
                                <option value="views_asc">浏览量↑</option>
                            </select>
                        </div>
                    </div>
                </div>

                <!-- 笔记列表 -->
                <div class="admin-card">
                    <div class="table-container">
                        <table class="admin-table">
                            <thead>
                                <tr>
                                    <th>
                                        <input type="checkbox" id="selectAll" onchange="toggleSelectAll()">
                                    </th>
                                    <th>笔记ID</th>
                                    <th>标题</th>
                                    <th>作者</th>
                                    <th>分类</th>
                                    <th>状态</th>
                                    <th>浏览量</th>
                                    <th>创建时间</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody id="notesTableBody">
                                <!-- 笔记数据将通过JavaScript动态加载 -->
                            </tbody>
                        </table>
                    </div>

                    <!-- 分页 -->
                    <div class="pagination">
                        <button class="btn" onclick="previousPage()" id="prevBtn">上一页</button>
                        <span class="page-info">
                            第 <span id="currentPage">1</span> 页，共 <span id="totalPages">1</span> 页
                        </span>
                        <button class="btn" onclick="nextPage()" id="nextBtn">下一页</button>
                    </div>
                </div>
            </div>
        </main>
    </div>

    <!-- 笔记详情模态框 -->
    <div id="noteDetailModal" class="modal">
        <div class="modal-content modal-large">
            <div class="modal-header">
                <h3 id="noteDetailTitle">笔记详情</h3>
                <button class="modal-close" onclick="closeNoteDetailModal()">&times;</button>
            </div>
            <div class="modal-body">
                <div class="note-detail">
                    <div class="note-meta">
                        <div class="meta-item">
                            <strong>作者：</strong>
                            <span id="noteAuthor"></span>
                        </div>
                        <div class="meta-item">
                            <strong>分类：</strong>
                            <span id="noteCategory"></span>
                        </div>
                        <div class="meta-item">
                            <strong>状态：</strong>
                            <span id="noteStatus"></span>
                        </div>
                        <div class="meta-item">
                            <strong>创建时间：</strong>
                            <span id="noteCreated"></span>
                        </div>
                        <div class="meta-item">
                            <strong>浏览量：</strong>
                            <span id="noteViews"></span>
                        </div>
                    </div>
                    <div class="note-content">
                        <h4>笔记内容：</h4>
                        <div id="noteContentDisplay"></div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button class="btn btn-danger" onclick="rejectNote()">拒绝</button>
                <button class="btn btn-success" onclick="approveNote()">通过</button>
                <button class="btn" onclick="closeNoteDetailModal()">关闭</button>
            </div>
        </div>
    </div>

    <!-- 批量操作模态框 -->
    <div id="batchActionModal" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <h3>批量操作</h3>
                <button class="modal-close" onclick="closeBatchActionModal()">&times;</button>
            </div>
            <div class="modal-body">
                <p>已选择 <span id="selectedCount">0</span> 个笔记</p>
                <div class="batch-actions">
                    <button class="btn btn-success" onclick="batchApprove()">批量通过</button>
                    <button class="btn btn-danger" onclick="batchReject()">批量拒绝</button>
                    <button class="btn btn-warning" onclick="batchDelete()">批量删除</button>
                </div>
            </div>
            <div class="modal-footer">
                <button class="btn" onclick="closeBatchActionModal()">取消</button>
            </div>
        </div>
    </div>

    <script src="js/admin-notes.js"></script>
</body>

</html>